import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { BreadcrumbLd, Breadcrumbs } from '@/components/meta/breadcrumb-ld';
import { Chip, ConfidenceBadge, EntityBadge, TierBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { Hint } from '@/components/ui/hint';
import { Container, Note, PageHeader, Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { ApiError, apiD3 } from '@/lib/api';
import { fmtDateTime, fmtInt, fmtValue, hostOf } from '@/lib/format';
import { propertyLabel, routes, SITE_NAME } from '@/lib/site';
import type { ClaimDetail, ClaimRow } from '@/lib/types';

type Params = { params: Promise<{ id: string }> };
const STATUS_TONE: Record<string, string> = { current: 'text-positive bg-positive-soft', superseded: 'text-ink-2 bg-surface-2', conflicting: 'text-danger bg-danger-soft', retracted: 'text-warning bg-warning-soft' };

async function loadClaim(id: string): Promise<ClaimDetail | null> {
  try {
    return await apiD3.claim(id);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    return null;
  }
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { id } = await params;
  let c: ClaimDetail | null = null;
  try {
    c = await apiD3.claim(id);
  } catch {
    c = null;
  }
  const title = c ? `${c.entity?.name ?? 'Entity'} · ${propertyLabel(c.property)} = ${fmtValue(c.claim.value, c.property)} — claim` : 'Claim';
  return { title, description: 'One temporal claim of the AI Atlas graph: value, source, tier, extractor, validity interval and its lifecycle (previous, superseding and conflicting claims).', alternates: { canonical: routes.claim(id) }, robots: { index: false, follow: true } };
}

function StatusChip({ s }: { s: string }) {
  return <span className={`inline-flex items-center rounded-[3px] px-1.5 py-[1px] text-[11px] font-medium ${STATUS_TONE[s] ?? 'text-ink-2 bg-surface-2'}`}>{s}</span>;
}

function ClaimTable({ rows, property, currentId, caption }: { rows: ClaimRow[]; property: string; currentId: string; caption: string }) {
  return (
    <DataTable caption={caption} compact>
      <thead>
        <tr>
          <Th>Value</Th>
          <Th>Status</Th>
          <Th>Valid from</Th>
          <Th>Valid to</Th>
          <Th>Source</Th>
          <Th>Tier</Th>
          <Th>Extractor</Th>
          <Th>Claim</Th>
        </tr>
      </thead>
      <tbody>
        {rows.length === 0 && <EmptyRow cols={8}>None.</EmptyRow>}
        {rows.map((c) => (
          <tr key={c.id} className={c.id === currentId ? 'bg-accent-soft/40' : undefined}>
            <Td primary className="tnum">{fmtValue(c.value, property)}{c.unit ? <span className="text-ink-3"> {c.unit}</span> : null}</Td>
            <Td label="Status">
              <StatusChip s={c.status} />
            </Td>
            <Td label="Valid from" className="tnum text-xs text-ink-2">{fmtDateTime(c.valid_from)}</Td>
            <Td label="Valid to" className="tnum text-xs text-ink-2">{c.valid_to ? fmtDateTime(c.valid_to) : <span className="text-positive">open</span>}</Td>
            <Td label="Source" className="text-xs">
              {c.source_url ? (
                <a href={c.source_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink-2 hover:text-accent">
                  {c.source_name ?? hostOf(c.source_url) ?? 'source'} <ExternalLink className="size-3" aria-hidden />
                </a>
              ) : (
                <span className="text-ink-3">—</span>
              )}
            </Td>
            <Td label="Tier">
              <TierBadge tier={c.tier} />
            </Td>
            <Td label="Extractor" className="mono text-xs text-ink-2">{c.extractor}</Td>
            <Td label="Claim">
              {c.id === currentId ? <span className="mono text-[11px] text-ink-3">this claim</span> : <Link href={routes.claim(c.id)} className="mono text-[11px] text-accent hover:underline">{c.id}</Link>}
            </Td>
          </tr>
        ))}
      </tbody>
    </DataTable>
  );
}

export default async function ClaimPage({ params }: Params) {
  const { id } = await params;
  const c = await loadClaim(id);
  if (!c) {
    return (
      <Container>
        <div className="py-16">
          <Unavailable what="Claim" />
        </div>
      </Container>
    );
  }
  const cl = c.claim;
  const e = c.entity;
  const crumbs = [{ name: SITE_NAME, href: '/' }, ...(e ? [{ name: e.name, href: routes.entity(e) }, { name: 'History', href: routes.entityHistory(e, c.property) }] : []), { name: `Claim · ${propertyLabel(c.property)}`, href: routes.claim(id) }];
  const chain = c.chain ?? { previous: [], superseding: [], conflicting: [], history_count: 0 };
  const lifecycle: ClaimRow[] = [...chain.previous, cl, ...chain.superseding].filter((x, i, arr) => arr.findIndex((y) => y.id === x.id) === i).sort((a, b) => (a.valid_from < b.valid_from ? -1 : 1));

  return (
    <Container wide>
      <BreadcrumbLd items={crumbs} />
      <Breadcrumbs items={crumbs} />
      <PageHeader
        eyebrow={
          <>
            Claim {e && <EntityBadge type={e.entity_type} small />} <StatusChip s={cl.status} />
          </>
        }
        title={
          <>
            {e ? (
              <Link href={routes.entity(e)} className="hover:text-accent">
                {e.name}
              </Link>
            ) : (
              'Entity'
            )}{' '}
            · <span className="text-ink-2">{propertyLabel(c.property)}</span> = <span className="tnum">{fmtValue(cl.value, c.property)}</span>
            {cl.unit && <span className="text-ink-3"> {cl.unit}</span>}
          </>
        }
        lede="A temporal claim: who said it, when it was observed, how it was extracted, how long it has been current, and what came before and after it. Claims are never overwritten — a better source supersedes, a worse one conflicts."
        aside={
          <p className="mono text-xs text-ink-3">
            {cl.id}
          </p>
        }
      />

      <div className="grid gap-10 pb-16 lg:grid-cols-[minmax(0,1fr)_24rem]">
        <div className="min-w-0">
          <Section id="lifecycle" eyebrow="Lifecycle" title={<>Lifecycle <span className="tnum text-base font-normal text-ink-3">{fmtInt(chain.history_count)} in history</span></>} lede="Previous values, this claim, and the claims that superseded it — in validity order." hairline={false} className="pt-0">
            <ClaimTable rows={lifecycle} property={c.property} currentId={cl.id} caption="Lifecycle" />
          </Section>
          <Section id="conflicts" eyebrow="Conflicts" title={<>Conflicting claims <span className="tnum text-base font-normal text-ink-3">{fmtInt(chain.conflicting.length)}</span></>} lede="Values stated by other sources that disagree with the current one. Stored side by side, flagged for review, never averaged.">
            <ClaimTable rows={chain.conflicting} property={c.property} currentId={cl.id} caption="Conflicting claims" />
          </Section>
          {c.note && <Note className="mt-4">{c.note}</Note>}
        </div>
        <aside className="min-w-0 space-y-8">
          <section>
            <p className="eyebrow mb-2">Source</p>
            <dl className="kv [&>div]:py-1.5 text-sm">
              <div>
                <dt>Name</dt>
                <dd>{c.source?.name ?? <span className="text-ink-3">—</span>}</dd>
              </div>
              <div>
                <dt>Domain</dt>
                <dd className="mono text-xs">{c.source?.domain ?? '—'}</dd>
              </div>
              <div>
                <dt>URL</dt>
                <dd>
                  {c.source?.url ? (
                    <a href={c.source.url} target="_blank" rel="noopener noreferrer" className="link break-all text-xs">
                      {c.source.url.replace(/^https?:\/\//, '').slice(0, 80)}
                    </a>
                  ) : (
                    '—'
                  )}
                </dd>
              </div>
              <div>
                <dt>Tier</dt>
                <dd>
                  <TierBadge tier={c.source?.tier ?? cl.tier} withLabel />
                </dd>
              </div>
              <div>
                <dt>Observed</dt>
                <dd className="tnum">{fmtDateTime(c.source?.observed_at ?? cl.observed_at)}</dd>
              </div>
              {cl.effective_at && (
                <div>
                  <dt>Effective</dt>
                  <dd className="tnum">{fmtDateTime(cl.effective_at)}</dd>
                </div>
              )}
            </dl>
          </section>
          <section>
            <p className="eyebrow mb-2">Extraction</p>
            <dl className="kv [&>div]:py-1.5 text-sm">
              <div>
                <dt>Extractor</dt>
                <dd className="mono">{c.extractor?.name ?? cl.extractor}{c.extractor?.version ? <span className="text-ink-3"> v{c.extractor.version}</span> : null}</dd>
              </div>
              <div>
                <dt>Confidence</dt>
                <dd>
                  <ConfidenceBadge confidence={c.extractor?.confidence ?? cl.confidence} />
                </dd>
              </div>
              <div>
                <dt>
                  Run id <Hint align="right" text="Batch identifier of the connector run that wrote this claim. Admins can roll back a whole run." />
                </dt>
                <dd className="mono text-xs">{c.run_id ?? cl.run_id ?? <span className="text-ink-3">— (written before run tracking)</span>}</dd>
              </div>
              <div>
                <dt>Snapshot id</dt>
                <dd className="mono text-xs">{c.evidence?.snapshot_id ?? c.source?.snapshot_id ?? '—'}</dd>
              </div>
              {cl.value_raw !== null && cl.value_raw !== undefined && (
                <div>
                  <dt>Raw value</dt>
                  <dd className="mono text-xs">{String(cl.value_raw)}</dd>
                </div>
              )}
            </dl>
          </section>
          <section>
            <p className="eyebrow mb-2">Evidence</p>
            {c.evidence ? (
              <dl className="kv [&>div]:py-1.5 text-sm">
                <div>
                  <dt>Document</dt>
                  <dd>
                    {c.evidence.document_url ? (
                      <a href={c.evidence.document_url} target="_blank" rel="noopener noreferrer" className="link break-all text-xs">
                        {c.evidence.document_title ?? c.evidence.document_url.replace(/^https?:\/\//, '').slice(0, 60)}
                      </a>
                    ) : (
                      '—'
                    )}
                    {c.evidence.doc_type && <span className="block text-[11px] text-ink-3">{c.evidence.doc_type}</span>}
                  </dd>
                </div>
                <div>
                  <dt>Snapshot observed</dt>
                  <dd className="tnum">{fmtDateTime(c.evidence.snapshot_observed_at)}</dd>
                </div>
                <div>
                  <dt>Archived</dt>
                  <dd>{c.evidence.archived ? <Chip tone="accent">yes</Chip> : <Chip>no</Chip>}</dd>
                </div>
              </dl>
            ) : (
              <p className="text-sm text-ink-3">No evidence pointer.</p>
            )}
            <div className="mt-3 flex flex-wrap gap-2 text-xs">
              {e && (
                <Link href={routes.entityHistory(e, c.property)} className="inline-flex h-8 items-center border border-rule px-2 text-ink-2 hover:border-rule-strong hover:text-ink">
                  Full history of {propertyLabel(c.property).toLowerCase()} →
                </Link>
              )}
              {(c.evidence?.snapshot_id ?? c.source?.snapshot_id) && (
                <Link href={`/admin/extractions/${encodeURIComponent(c.evidence?.snapshot_id ?? c.source?.snapshot_id ?? '')}`} className="inline-flex h-8 items-center gap-1 border border-dashed border-rule px-2 text-ink-3 hover:border-rule-strong hover:text-ink" title="Administrators only: raw archived content and the extraction pipeline for this snapshot">
                  View archived snapshot <span className="rounded-[3px] bg-surface-2 px-1 text-[10px] uppercase">admin</span>
                </Link>
              )}
            </div>
            <Note className="mt-2">Raw archived content is available to administrators only; the public evidence is the pointer (snapshot id, document, observation time). <Link href={routes.methodology()} className="link">Methodology →</Link></Note>
          </section>
        </aside>
      </div>
    </Container>
  );
}